<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title></title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <style type="text/css">
        ul { list-style: none; padding: 0; margin: 0; width: 800px; }

        ul li { position: relative; float: left; width: 192px; height: 288px; margin: 10px; display: inline; }
        ul li .mask{width: 192px;height: 288px; position: absolute;
            background: url(loading.gif) no-repeat center #fff;  left:0;top:0;}
        ul li img {
            width: 192px;height: 288px; float: left; opacity: 0; filter:alpha(opacity=0);
            -webkit-transition: all 1s ease 0;
        }
    </style>
</head>
<body>
<body>


</body>
<ul id="delay_loading">
    <li>
        <img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_010.jpg">
        <div class="mask"></div>
    </li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_011.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_012.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_013.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_014.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_015.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_016.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_017.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_018.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_019.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_020.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_021.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_022.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_023.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_024.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_025.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_026.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_027.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_028.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_029.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_030.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_031.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_032.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_033.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_034.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_035.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_036.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_037.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_038.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_039.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_040.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_041.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_042.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_043.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_044.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_045.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_046.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_047.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_048.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_049.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_050.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_051.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_052.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_053.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_054.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_055.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_056.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_057.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_058.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_059.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_060.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_061.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_062.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_063.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_064.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_065.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_066.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_067.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_068.jpg"><div class="mask"></div></li>
    <li><img src="" alt="" resrc="http://cued.xunlei.com/demos/publ/img/P_069.jpg"><div class="mask"></div></li>

</ul>
<script type="text/javascript">
    (function () {
        var DelayLoad={
            odelayload:document.getElementById('delay_loading'),
            needele:null,
            getneedele:function(){
                var eleobj={img:[],src:[],mask:[]},
                    allimg= this.odelayload.getElementsByTagName('img');
                for(var i=0;i<allimg.length;i++){
                    eleobj.img.push(allimg[i]);
                    eleobj.src.push(allimg[i].getAttribute('resrc'));
                    eleobj.mask.push(this.getclass(allimg[i].parentNode.getElementsByTagName('div'),'mask'));

                }
                return eleobj;

            },
            getclass:function(eles,cname){
                for(var i=0;i<eles.length;i++){
                    if(eles[i].className===cname){
                        return eles[i];
                    }
                }
            },

            offset:function (ele ) {
                var oRect = ele.getBoundingClientRect(),
                    sct=document.body.scrollTop,
                    docl =0,
                    doct = 0,
                    offset;


                if (typeof arguments.callee.offset != "number") {
                    var temp = document.createElement("div");
                    temp.style.cssText = "position:absolute;left:0;top:0;";
                    document.body.appendChild(temp);
                    arguments.callee.offset = -temp.getBoundingClientRect().top - sct;
                    document.body.removeChild(temp);
                    temp = null;
                }
                offset = arguments.callee.offset;
                return oRect.top + offset + doct;
            },
            showimg:function(num){
                var _this=this,curimg,cursrc,curmask;
                for(var i=0;i<num;i++){
                    curimg=this.needele.img.shift();
                    cursrc=this.needele.src.shift();
                    curmask=this.needele.mask.shift();
                    (function(curmask){
                        curimg.onload=function(){
                            curmask.parentNode.removeChild(curmask);
                            _this.fadein(this)

                        };
                    })(curmask);

                    curimg.src=cursrc;

                }
            },
            fadein:function(ele){

                var times=1000/200,i=0;
                var t=setInterval(function(){
                    if(i===times){
                        clearInterval(t);
                    }
                    ele.style.opacity=i/10;
                    ele.style.filter='alpha(opacity='+i*10+')';
                    i+=2;
                },200);

            },
            isshow:function(ele){
                var doc=document,docElemProp;
                    docElemProp = doc.documentElement['clientHeight'];

                 var winh= doc.compatMode === 'CSS1Compat' && docElemProp ||  doc.body['clientHeight'] || docElemProp;

                    return ele&&this.offset(ele)<winh;
            },
            onscroll:function(){
                var _this=this;
                window.onscroll=function(){
                    if(_this.isshow(_this.needele.img[0])){
                        _this.showimg(3);
                    }
                 }
            },
            init:function(){
                this.needele=this.getneedele();
                this.showimg(9);
                this.onscroll();
            }
        }
        DelayLoad.init();
    })();
</script>
</body>
</html>